<template>
  <div class="home-wrap">
    <div class="home__flex">
      <Overview />
      <Message />
    </div>

    <OverviewAll />
    <OverviewFinance/>
    <Activity />

    <Trend />

    <Ranking />

    <Procure />

    <Collection />

    <WaitingCollection />

    <Payment />

    <WaitingPayment />

    <Product />

    <InventoryMonitoring/>
  </div>
</template>

<script>
import { getTodoTaskPage } from '@/api/bpm/task'
import Overview from './components/overview.vue';
import Message from './components/message.vue';
import OverviewAll from './components/overview-all.vue';
import OverviewFinance from './components/overview-finance.vue';
import Activity from './components/activity.vue';
import Trend from './components/trend.vue';
import Ranking from './components/ranking.vue';
import Procure from './components/procure.vue';
import Collection from './components/collection.vue';
import Payment from './components/payment.vue';
import WaitingPayment from './components/waiting-payment.vue';
import WaitingCollection from './components/waiting-collection.vue';
import Product from './components/product.vue';
import InventoryMonitoring from './components/InventoryMonitoring.vue';
export default {
  name: 'Index',
  components: {
    Overview,
    Message,
    OverviewAll,
    OverviewFinance,
    Activity,
    Trend,
    Ranking,
    Procure,
    Collection,
    Payment,
    WaitingPayment,
    WaitingCollection,
    Product,
    InventoryMonitoring
  },
  data() {
    return {
      users: [],
      users2: [112],
      todoList: [],
    }
  },
  created() {
    this.getTodoList();
  },
  methods: {
    /** 处理审批按钮 */
    handleAudit(row) {
      this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id } });
    },
    /** 查询列表 */
    getTodoList() {
      // 处理查询参数
      getTodoTaskPage({
        pageNo: 1,
        pageSize: 10,
      }).then(response => {
        this.todoList = response.data.list;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep ul,
::v-deep h1,
::v-deep h2,
::v-deep h3,
::v-deep h4,
::v-deep h5 {
  margin: 0;
  padding: 0;
}
.home-wrap {
  position: relative;
  .home__flex {
    display: flex;
    ::v-deep .home__card-item {
      flex: 1;
      margin-bottom: 16px;
      &:first-child {
        margin-right: 16px;
      }
    }
  }

  ::v-deep .home__card-item {
    flex: 1;
    margin-bottom: 16px;
    .el-card__header {
      padding: 10px;
      line-height: 30px;
    }
    .el-card__body {
      padding: 0;
    }
    .home__card-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      h3 {
        margin: 0;
        padding: 0;
        flex: 1;
        width: 100%;
        font-weight: 700;
        font-size: 16px;
      }
      .home__card-menu {
        margin: 0 12px;
        display: flex;
        li {
          margin-left: 6px;
          cursor: pointer;
          &.active {
            color: #000;
            font-weight: 700;
          }
        }
      }
      .el-date-editor {
        width: 260px;
      }
    }
    .home__card-content {
      display: flex;
      .home__card-content-sum {
        min-width: 160px;
        border-right: 1px solid #ebeef5;
        .home__card-content-sum__item {
          padding: 20px;
          font-size: 24px;
          & > label {
            display: block;
            font-size: 12px;
            margin-bottom: 10px;
          }
        }
      }
      .home__card-content-wrap {
        flex: 1;
        text-align: center;
        padding: 0 20px 20px;
        overflow: hidden;
      }
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .dashboard__todos-warp {
    ::v-deep .el-card__header {
      padding: 10px;
      font-size: 16px;
    }
    ::v-deep .el-card__body {
      padding: 8px;
    }
    .dashboard__todos-item {
      display: flex;
      align-items: baseline;
      margin-bottom: 16px;
      font-size: 14px;
      &:last-child {
        margin-bottom: 0;
      }
      .dashboard__todos-item__text {
        flex: 1;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
